<template>
    <div>
        <MyTable :arr="list">
            <template v-slot:head>
                <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th>
            </template>
            <template v-slot:body="scope">
                <td>{{ scope.row.id }}</td>
                <td>{{scope.row.goods_name}}</td>
                <td>{{scope.row.goods_price}}</td>
                <td>
                    <div>
                        <input v-model.trim="scope.row.inputValue" ref="inp" v-if="scope.row.inputVisible" type="text"
                        @blur="blurFn(scope.row)"
                        @keydown.enter="addFn(scope.row)"
                        @keydown.esc="scope.row.inputValue = ''">
                        <button v-else @click="showInput(scope.row)">+tag</button>
                    </div>
                    <!-- {{scope.row.tags}} -->
                    <span v-for="(item,index) in scope.row.tags" 
                    :key="index"
                    class="badge badge-warning">
                        {{ item }}
                    </span>
                </td>
                <td>
                    <button class="btn btn-danger btn-sm" @click="delFn(scope.row.id)">删除</button>
                </td>
            </template>
        </MyTable>
    </div>
</template>

<script>
/**
 * 需求：点击删除按钮，实现把对应的数据从表格中删除
 *  1、给按钮绑定点击事件，并给事件处理函数传id
 *  2、在函数中根据id实现删除即可
 * 
 * 需求1：点击tab按钮，按钮消失，输入框出现
 *  1、布局，把按钮和输入框添加到标签列的单元格内
 *  2、实现默认按钮显示，输入框隐藏，使用v-if绑定布尔值实现
 *  3、给按钮绑定点击事件，然后把布尔值取反
 * 
 * 需求3：失去焦点，输入框消失，按钮出现
 *  1、给输入框绑定失去焦点事件（blur），并给事件处理函数传递当前行的数据对象
 *  2、在事件处理函数中设置inputVisible的为false即可
 * 
 */ 
import MyTable from '../components/MyTable.vue'
import axios from "axios"
export default {
    components: {
        MyTable
    },
    data(){
        return {
            list: [],
            // bool: false
        }
    },
    created(){
        // 获取商品列表数据
        axios({
            url: "https://www.escook.cn/api/goods",
            method: "get"
        }).then(res=>{
            console.log(20,res);
            this.list = res.data.data;
            // this.list.forEach(item=>{
            //     item.bool = false
            // })
        })
    },
    methods: {
        delFn(id){
            let index = this.list.findIndex(item=>item.id===id)
            this.list.splice(index, 1)
        },
        // 控制输入框显示  按钮消失
        showInput(row){
            // console.log(row);
            row.inputVisible = !row.inputVisible
            // 输入框自动聚焦
            // 因为DOM更新是异步，因此这里获取不到输入框，从而导致调用focus的时候直接报错
            // this.$refs.inp.focus()
            // 如何解决呢？答：可以在$nextTick的回调函数中获取输入框进行聚焦
            this.$nextTick(()=>{
                this.$refs.inp.focus()
            })
        },
        blurFn(row){
            row.inputVisible = false
        },
        addFn(row){
            if(row.inputValue == ""){
                return alert("输入框内容不能为空！")
            }
            row.tags.push(row.inputValue)
            row.inputValue = ""
        }
    }
}
</script>

<style scoped>
.badge-warning{
    background: #ffc109;
    color: #000;
    margin-right: 5px;
}
</style>